<script setup lang="tsx">
import HugeiconsAccess from "~icons/hugeicons/access";
import AntDesignSlackOutlined from "~icons/ant-design/slack-outlined";
import DaySvg from "@/assets/svg/day.svg?component";
import { addDialog } from "@/components/ReDialog";
import IndexList from "./list.vue";
import createForm from "./create-form.vue";
import { message } from "@/utils/message";
import { onMounted, getCurrentInstance } from "vue";

defineOptions({
  name: "Welcome"
});

const { proxy } = getCurrentInstance();

function onBaseClick() {
  addDialog({
    title: "基础用法",
    fullscreenIcon: true,
    contentRenderer: () => <p>弹框内容-基础用法</p>
  });
}

function onListClick() {
  addDialog({
    title: "基础用法",
    fullscreenIcon: true,
    contentRenderer: () => IndexList
  });
}

function onCreateFormClick() {
  addDialog({
    title: "表单",
    fullscreenIcon: true,
    props: {
      formInline: {
        user: "superwen",
        region: "浙江",
        region2: ["330000", "330100", "330102"]
      }
    },
    contentRenderer: () => createForm
  });
}

onMounted(() => {});

const onMessage = () => {
  message("欢迎使用 Pure-Admin-Thin（非国际化版本）", {
    type: "success",
    icon: DaySvg
  });
};

const onConfirm = () => {
  proxy
    .$confirm("确认删除?", {
      confirmButtonText: "确定",
      cancelButtonText: "取消",
      type: "warning"
    })
    .then(() => {
      proxy.$message({
        message: "删除成功",
        type: "success"
      });
    });
};
</script>

<template>
  <div>
    <el-card class="w-full" shadow="never">
      <template #header>
        <h4>Pure-Admin-Thin（非国际化版本）</h4>
      </template>
      <el-space alignment="start" :size="30" class="mt-4">
        <HugeiconsAccess style="width: 40px; height: 40px" />
        <AntDesignSlackOutlined style="width: 40px; height: 40px" />
        <DaySvg style="width: 40px; height: 40px" />
        <button @click="onBaseClick">打开欢迎对话框</button>
        <el-button type="primary" @click="onListClick">Primary</el-button>
        <el-button type="primary" @click="onCreateFormClick">Create</el-button>
        <el-button @click="onConfirm">全局confirm</el-button>
        <el-button @click="onMessage">message方法</el-button>
      </el-space>
    </el-card>
  </div>
</template>
